<template>
  <div class="recommend-container"
       :style='{bottom: contentBottom + "px"}'>
    <Scroll class="recommend-content"
            :data='recomPlaylist'
            ref="scroll">
      <div>
        <div class="recommend-slider">
          <mt-swipe :prevent='true'
                    :auto="slider_param.auto"
                    :showIndicators='slider_param.showIndicators'
                    class="slider-box"
                    @change="handleChange">
            <mt-swipe-item v-for="(item, index) in slider"
                           :key="index">
              <a :href="item.linkUrl">
                <img :src="item.picUrl"
                     ref='sliderImg'
                     @load.once='recomPlaylist.length ? refresh : false'>
              </a>
            </mt-swipe-item>
          </mt-swipe>
          <div class="dots">
            <span class="dot"
                  :class="{active: i === index }"
                  v-for="(item, index) in dots"
                  :key='index'></span>
          </div>
        </div>
        <div class="recommend-songSheet">
          <h1 class="text-center">热门歌单推荐</h1>
          <div class="list-item"
               v-for="(item, index) in recomPlaylist"
               :key="index"
               @click='toSongSheet(item)'>
            <img v-lazy="item.cover"
                 width="60"
                 height="60">
            <div class="list-text">
              <p class="list-title">{{item.title}}</p>
              <p class="list-num">播放量: {{item.listen_num_show}}</p>
            </div>
          </div>
        </div>
      </div>
    </Scroll>
    <transition name='fade'>
      <div class="loading-container"
           v-show="!recomPlaylist.length">
        <loading></loading>
      </div>
    </transition>
    <transition name='slide'
                mode='out-in'>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getRecommend, getDisList, getDownload } from 'api/recommend'
import { ERR_OK } from 'api/config'
import Loading from 'base/loading/loading'
import Scroll from 'base/scroll/scroll'
import { mapMutations } from 'vuex'
import { playMiniMixin } from 'common/js/mixin'
import * as types from 'store/mutation_types'
export default {
  mixins: [playMiniMixin],
  data () {
    return {
      // 轮播图
      slider: [],
      // 组件参数
      slider_param: {
        auto: 4000,
        showIndicators: false
      },
      // 当前索引
      i: 0,
      dots: 0,
      // 歌单数据
      recomPlaylist: []
      // 全局有歌曲的时候 bottom 需要调整 60px
      // content_bottom: 0
    }
  },
  created () {
    this._getRecommend()
    setTimeout(() => {
      this._getDisList()
    }, 2000)
    this._getDownload()
  },
  mounted () {

  },
  methods: {
    toSongSheet (item) {
      this.setSongSheet(item)
      this.$router.push(`/recommend/${item.id}`)
    },
    async _getRecommend () {
      let res = await getRecommend()
      if (res.code === ERR_OK) {
        this.slider = res.data.slider
        this.dots = this.slider.length - 0
      }
    },
    async _getDisList () {
      // 热门歌单
      let res = await getDisList()
      if (res.code === ERR_OK) {
        let data = res.recomPlaylist.data.v_hot
        data.map((item) => {
          let num = item.listen_num / 10000
          if (num > 1) {
            item.listen_num_show = num.toFixed(1) + '万'
          } else {
            item.listen_num_show = item.listen_num
          }
        })
        this.recomPlaylist = data
        this.$nextTick(() => {
          this.refresh()
        })
      }
    },
    async _getDownload () {
      let res = await getDownload()
      // let data = res.replace('MusicJsonCallback(', '')
      // console.log(JSON.parse(data.substr(0, data.length - 1)))
      if (res.code === ERR_OK) {
        // console.log(res)
      }
    },
    handleChange (i) {
      this.i = i
    },
    // 防止数据加载慢scroll组件没获取到高度
    refresh () {
      this.$refs.scroll.refresh()
    },
    ...mapMutations({
      setSongSheet: types['SET_SONGSHEET']
    })
  },
  components: {
    Scroll,
    Loading
  },
  // 销毁时 如有定时器 清除
  destroyed () {

  }
}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'
.recommend-container
  position fixed
  width 100%
  top 88px
  bottom 0
.recommend-content
  height 100%
  overflow hidden
.recommend-slider
  position relative
  .dots
    position absolute
    right 0
    left 0
    bottom 12px
    text-align center
    font-size 0
    .dot
      display inline-block
      margin 0 4px
      width 8px
      height 8px
      border-radius 50%
      background $color-text-l
      &.active
        width 20px
        border-radius 5px
        background $color-text-ll
.slider-box
  height 150px
  a
    display block
    img
      width 100%
      background-size cover
.recommend-songSheet
  h1
    line-height 50px
    font-size 16px
    color $color-theme
  .list-item
    flex-center()
    padding 15px 24px
    font-size 14px
    img
      margin-right 15px
    .list-title
      margin-bottom 15px
      line-height 1.25em
    .list-num
      color $color-text-d
@media (min-width: 768px)
  .slider-box
    height 356px
</style>